<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="A datavisualization tool that leads you from your data to the graphic you need." content="">
    <meta name="Yan Holtz & Conor Healy" content="">

    <title>Data to Viz | A collection of graphic pitfalls</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
    <link rel="icon" href="img/logo/data-to-viz.ico">

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- JQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

  </head>

  <body id="page-top">

    <!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
    <script>
      $(function(){
        $("#mainNav").load("menu.html");
      });
    </script>






<!-- --------------------------- CAVEATS SECTION ------------------------------------------------------------------- -->

    <section id="caveats">
      <div class="container">


        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Caveats</h2>
            <h3 class="section-subheading text-muted">A collection of dataviz caveats by <a href="https://www.data-to-viz.com">data-to-viz.com</a></h3>
            <div id="myBtnContainer">
              <button class="btn btn-secondary" onclick="filterSelection('all')">Show all</button>
              <button class="btn btn-secondary" onclick="filterSelection('top10')">Top 10</button>
              <button class="btn btn-secondary" onclick="filterSelection('improvement')">Improvement</button>
              <button class="btn btn-secondary" onclick="filterSelection('misleading')">Misleading</button>
              <button class="btn btn-secondary" onclick="filterSelection('map')">Map</button>
              <button class="btn btn-secondary" onclick="filterSelection('bar')">Bar</button>
            </div>
            <br>
          </div>
        </div>
                <div class="row">
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="caveat/order_data.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/order_data.png">
                      <p class="mytitlerelated">Order your data</p>
                      <p class="mytextrelated">When displaying the value of several entities, ordering them makes the graph much more insightful.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading top10 bar">
                    <a href="caveat/cut_y_axis.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/cut_y_axis.png">
                      <p class="mytitlerelated">To cut or not to cut?</p>
                      <p class="mytextrelated">Cutting the Y-axis is one of the most controversial practice in data viz. See why.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="caveat/spaghetti.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/spaghetti.png">
                      <p class="mytitlerelated">The spaghetti chart</p>
                      <p class="mytextrelated">A line graph with too many lines becomes unreadable: it is called a spaghetti graph.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement top10">
                    <a href="caveat/pie.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/pie.png">
                      <p class="mytitlerelated">Pie chart</p>
                      <p class="mytextrelated">The human eye is bad at reading angles. See how to replace the most criticized chart ever.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading">
                    <a href="caveat/bin_size.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/bin_size.png">
                      <p class="mytitlerelated">Play with histogram bin size</p>
                      <p class="mytextrelated">Always try different bin sizes when you build a histogram, it can lead to different insights.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading improvement top10">
                    <a href="caveat/boxplot.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/boxplot.png">
                      <p class="mytitlerelated">Do boxplots hide information?</p>
                      <p class="mytextrelated">Boxplots are a great way to summarize a distribution but hide the sample size and their distribution.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading improvement top10 bar">
                    <a href="caveat/error_bar.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/error_bar.png">
                      <p class="mytitlerelated">The problem with error bars</p>
                      <p class="mytextrelated">Barplots with error bars must be used with great care. See why and how to replace them.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="caveat/multi_distribution.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/multi_distribution.png">
                      <p class="mytitlerelated">Too many distributions.</p>
                      <p class="mytextrelated">If you need to compare the distributions of many variables, don't clutter your graphic.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="caveat/overplotting.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/overplotting.png">
                      <p class="mytitlerelated">Overplotting</p>
                      <p class="mytextrelated">Too many points on your scatter plot makes it unreadable? Techniques exist to avoid overplotting.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement" style="opacity: 0.6">
                    <a href="https://blog.datawrapper.de/colors/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/rainbow.png">
                      <p class="mytitlerelated">The rainbow color palette</p>
                      <p class="mytextrelated">Avoid the rainbow color palette when you map a numeric variable. So many better palettes exist.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar" style="opacity: 0.6">
                    <a href="caveat/small_multiple.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/small_multiple.png">
                      <p class="mytitlerelated">Faceting: horizontal or vertical?</p>
                      <p class="mytextrelated">Placing the individual plot horizontally or vertically is an important choice to make.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading">
                    <a href="caveat/counter_intuitive.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/counter_intuitive.png">
                      <p class="mytitlerelated">Don't be counter intuitive</p>
                      <p class="mytextrelated">Your audience is used to a few dataviz standards. Not respecting standards can be misleading.</p>
                    </a>
                  </div>


                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading top10">
                    <a href="https://blog.datawrapper.de/dualaxis/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/dual_axis.png">
                      <p class="mytitlerelated">The problem with dual axes</p>
                      <p class="mytextrelated">Using dual axes is a good way to manipulate the history behind your data. Avoid it. (blog by datawrapper)</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading">
                    <a href="caveat/calculation_error.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/calculation_error.png">
                      <p class="mytitlerelated">Calculation errors</p>
                      <p class="mytextrelated">Always double-check the values written on the chart. Does your sum make sense?</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="caveat/circular_barplot_accordeon.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/circular_barplot_accordeon.png">
                      <p class="mytitlerelated">Barplots with radial coordinates</p>
                      <p class="mytextrelated">This kind of barplot distorts reality: outer bars tend to look bigger than inner ones.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="caveat/connect_your_dot.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/connect_your_dot.png">
                      <p class="mytitlerelated">Connect your dots</p>
                      <p class="mytextrelated">If your X-axis is ordered, connecting the dots will make the message much clearer.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="caveat/color_com_nothing.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/color_com_nothing.png">
                      <p class="mytitlerelated">Color that communicates nothing</p>
                      <p class="mytextrelated">A bad use of colors can be misleading. If your color does not represent anything, don't use it.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading">
                    <a href="caveat/radius_or_area.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/radius_or_area.png">
                      <p class="mytitlerelated">Bubble size: radius or area?</p>
                      <p class="mytextrelated">When using bubbles on a chart, their area must be proportional to the underlying variable. Not their radius.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="caveat/hard_label.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/hard_label.png">
                      <p class="mytitlerelated">When axis labels break your neck</p>
                      <p class="mytextrelated">Having long and vertical axis labels can be annoying. If you can, flip your chart.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="caveat/circular_bar_yaxis.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/circular_bar_yaxis.png">
                      <p class="mytitlerelated">Circular barplots and distortion</p>
                      <p class="mytextrelated">Set a sufficient inner circle size to avoid bar shape distortion.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading bar">
                    <a href="caveat/3d.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/3d.png">
                      <p class="mytitlerelated">The issue with 3D</p>
                      <p class="mytextrelated">Except in a few rare situations, 3D must be avoided. It distorts reality.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement misleading">
                    <a href="caveat/aspect_ratio.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/aspect_ratio.png">
                      <p class="mytitlerelated">Mind the aspect ratio</p>
                      <p class="mytextrelated">Avoid extreme aspect ratios. They can make a plot unreadable.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="caveat/stacking.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/stacking.png">
                      <p class="mytitlerelated">The issue with stacking</p>
                      <p class="mytextrelated">Stacking makes it difficult to analyze each represented group. See when to use it.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="caveat/mental_calculation.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/mental_workout.png">
                      <p class="mytitlerelated">Mental arithmetic</p>
                      <p class="mytextrelated">Don't ask the reader to do mental arithmetic, it is hard to compare shapes.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading">
                    <a href="caveat/area_hard.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/bubble_hard.png">
                      <p class="mytitlerelated">Area is a poor metaphor</p>
                      <p class="mytextrelated">Human brains struggle to translate areas to precise values. Prefer other shapes.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="caveat/grouped_bar.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/ungrouped_grouped_barplot.png">
                      <p class="mytitlerelated">Grouped barplots must be grouped</p>
                      <p class="mytextrelated">In a grouped barplot, bars in the same group must be close one to each other. It makes grouping obvious.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="caveat/declutter.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/declutter_your_graphic.png">
                      <p class="mytitlerelated">De-clutter your graphic</p>
                      <p class="mytextrelated">Keep only what's necessary on your graphic: 3d, color effect, redundant info, etc. hide the story.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement" style="opacity: 0.6">
                    <a href="https://www.r-graph-gallery.com/239-custom-layout-legend-ggplot2.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/mind_your_legend.png">
                      <p class="mytitlerelated">Mind your legend</p>
                      <p class="mytextrelated">A few tips for a useful legend. Hint: you should worry if you have 14 groups.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement misleading">
                    <a href="caveat/consistency.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/consistency_sev_graph.png">
                      <p class="mytitlerelated">Consistency between charts</p>
                      <p class="mytextrelated">If you present several graphics, be consistent. Does each color always represent the same group?</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement misleading">
                    <a href="caveat/spider.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/spider.png">
                      <p class="mytitlerelated">Spider chart and its caveats</p>
                      <p class="mytextrelated">Spider or radar charts are often criticized in dataviz, here is an overview of the topic.</p>
                    </a>
                  </div>
                 <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="graph/heatmap.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/heatmap.png">
                      <p class="mytitlerelated">What you should consider when doing a heatmap</p>
                      <p class="mytextrelated">Heatmaps are a powerful way of visualizing information. A few features must be considered.</p>
                    </a>
                  </div>

                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading top10">
                    <a href="caveat/simpson.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/simpson.png">
                      <p class="mytitlerelated">The Simpson paradox</p>
                      <p class="mytextrelated">When a trend appears in several different groups of data but reverses when these groups are combined</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement">
                    <a href="caveat/annotation.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/annotate.png">
                      <p class="mytitlerelated">Annotate your chart</p>
                      <p class="mytextrelated">Help the reader understand your point: highlight the important part</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column improvement bar">
                    <a href="http://gravyanecdote.com/uncategorized/wrappedbarsthoughts/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/moire.png">
                      <p class="mytitlerelated">The Moire effect</p>
                      <p class="mytextrelated">If you have a barplot with many bars of similar length, consider a lollipop chart instead.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading map top10">
                    <a href="https://xkcd.com/1138/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/choropleth_normalization.png">
                      <p class="mytitlerelated">Choropleth and normalization</p>
                      <p class="mytextrelated">If you don't scale your data, your choropleth will basically look like a population map.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column misleading map">
                    <a href="https://blog.datawrapper.de/weeklychart-logscale3/" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/map_scale.png">
                      <p class="mytitlerelated">How to read a log scale</p>
                      <p class="mytextrelated">Comparing percentage change on a linear scale can be misleading, use a log scale instead. By datawrapper.</p>
                    </a>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 column map">
                    <a href="https://twitter.com/hashtag/chloropleth" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
                      <img  src="img/mistake/choropleth_vocab.png">
                      <p class="mytitlerelated">There is no 'L' in choropleth</p>
                      <p class="mytextrelated">And people won't miss an opportunity to make you notice..</p>
                    </a>
                  </div>
                </div>
               </div>
            </div>

        </div>

        <br>
        <div style="text-align:center"><a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="index.html">Back to Data-to-viz.com</a></div>

      </section>


<!-- --------------------------------------------------------------------------------------------- -->




<!-- --------------------------- INTRO DISQUS ------------------------------------------------------------------- -->

<section class="bg-light">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Suggestion</h2>
            <h3 class="section-subheading text-muted">Any other suggestion? A common pitfall is missing?<br><br>Please drop me a word in the comment section, and I will add it to the collection.</h3>
            <br>
          </div>
        </div>


<!-- --------------------------------------------------------------------------------------------- -->




<!-- --------------------------- DISQUS SECTION ------------------------------------------------------------------- -->


      <div class="container">
        <div id="disqus_thread"></div>
        <script>

        var disqus_config = function () {
        this.page.url = www.data-to-viz.com/caveats.html;
        this.page.identifier = caveats;
        };

        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://data-to-viz.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      </div>

<!-- --------------------------------------------------------------------------------------------- -->




</section>










<!-- --------------------------- FOOTER SECTION ------------------------------------------------------------------- -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; from Data to Viz 2018</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

<!-- ---------------------------------------------------------------------------------------------- -->





<script>
// --------------------------------------------------------------------------------------------------------------------------------- //
// A script to select charts based on their tag //
// --------------------------------------------------------------------------------------------------------------------------------- //
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
// --------------------------------------------------------------------------------------------------------------------------------- //
</script>













<!-- ------------------------ JAVASCRIPT SECTION ----------------------------- -->



    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
	$(function () {
  		$('[data-toggle="tooltip"]').tooltip()
	})
	</script>


    <!-- Script for animated portfolio with filter. Found here: https://codepen.io/pramodkumarboda/pen/XdgxmQ -->
    <script>
  	$(window).load(function(){
  	    var $container = $('.portfolioContainer');
  	    $container.isotope({
  	        filter: '*',
  	        animationOptions: {
  	            duration: 750,
  	            easing: 'linear',
  	            queue: false
  	        }
  	    });

  	    $('.portfolioFilter a').click(function(){
  	        $('.portfolioFilter .current').removeClass('current');
  	        $(this).addClass('current');

  	        var selector = $(this).attr('data-filter');
  	        $container.isotope({
  	            filter: selector,
  	            animationOptions: {
  	                duration: 750,
  	                easing: 'linear',
  	                queue: false
  	            }
  	         });
  	         return false;
  	    });
  	});
	</script>




    <!-- Script to give a specific URL to every Modal. TODO: improve it with https://stackoverflow.com/questions/34154370/bootstrap-3-x-how-to-have-url-change-upon-clicking-modal-trigger -->
    <script>
      $(document).ready(function(){
        $(window.location.hash).modal('show');
        $('a[data-toggle="modal"]').click(function(){
           window.location.hash = $(this).attr('href');
        });
      });

      $('button[data-dismiss="modal"]').click(function(){
           var original = window.location.href.substr(0, window.location.href.indexOf('#'))
           history.replaceState({}, document.title, original);
       });

      $(window.location.hash).modal('show');
      $('a[data-toggle="modal"]').click(function(){
          window.location.hash = $(this).attr('href');
      });

      function revertToOriginalURL() {
          var original = window.location.href.substr(0, window.location.href.indexOf('#'))
          history.replaceState({}, document.title, original);
      }

      $('.modal').on('hidden.bs.modal', function () {
          revertToOriginalURL();
      });

  </script>


  <script>
    $('.tip').each(function () {
      $(this).tooltip(
      {
        html: true,
          title: $('#' + $(this).data('tip')).html()
      });
    });
  </script>


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-79254642-3');
</script>
<script>
var getOutboundLink = function(url) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': url,
    'transport_type': 'beacon',
    'event_callback': function(){document.location = url;}
  });
}
</script>


<!----------------------------------------------------------------------------------------------- -->







  </body>

</html>
